/**
 * 【事件处理】
 * React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
 * 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
 * 不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault
 */
import React from 'react';

/**
 * 向事件处理程序传递参数的两种方式： 箭头函数 和 Function.prototype.bind
 * 【箭头函数】(e) => this.deleteRow(参数, e);
 * 【bind】this.deleteRow.bind(this, 参数)
 * React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。
 */
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggleOn: true
    }
    /**
     * 在 JavaScript 中，class 的方法默认不会绑定 this。
     * 如果你忘记绑定 this.handleClick 并把它传入了 onClick，
     * 当你调用这个函数的时候 this 的值为 undefined。
     */
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }))
  }
  render() {
    return (
      /**
       * 注意：
       * 如果 onClick 写成 this.handleClick 则需要在 constructor 中给 handleClick绑定 this,
       * 如果 onClick 写成 () => this.handleClick() 就不需要绑定 this
       */
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>

      // 向事件处理程序传递参数
    );
  }
}
export default Toggle;